import React from 'react';
import './index.less';
import {bindModel, bindAction, render} from 'react-division';
import DmPageModel from './models/DmPage';
import DmPageAction from './actions/DmAction';
import Header from './components/Header';
import ModelInfo from './components/ModelInfo';
import ModelList from './components/ModelList';
import DataTable from './components/DataTable';

bindModel({
    dmPageM: DmPageModel
});
bindAction({
    dmPageA: DmPageAction
});

export default render({
    models: ['dmPageM'],
    actions: ['dmPageA']
})(class extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const {action, dmPageM} = this.props;

        return (
            <div className="design-model-page">
                <Header />
                {dmPageM.page === 'list' && <ModelList />}
                {dmPageM.page === 'info' && <ModelInfo />}
                {dmPageM.page === 'detail' && <DataTable />}
            </div>
        )
    }
});